/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import type {ReactNode} from 'react';
import React, {useEffect, useState} from 'react';
import {
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
  TextInput,
  KeyboardAvoidingView,
  PixelRatio,
  Keyboard
} from 'react-native';
import {NavigationProp, useNavigation} from '@react-navigation/native';
import AvoidContainer from '../../components/AvoidContainer/AvoidContainer';
import {useBreakpointValue} from '@hadss/react_native_adaptive_layout';

type RootStackParams = {
  home: undefined;
  player: undefined;
};

const Page = (): ReactNode => {
  const navigation = useNavigation<NavigationProp<RootStackParams>>();
  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
  const [isPlaying, setIsPlaying] = useState<boolean>(false);
  const [keyboardVisible, setKeyboardVisible] = useState<boolean>(false);
  const ARROW_WHITE = require('../../../assets/common/icon_back_white.png');
  const [value, setValue] = useState<string>();
  const adaptivePlayBtn = useBreakpointValue<ViewStyle>({
    base: {
      width: 40,
      height: 40,
      borderRadius: 15,
      backgroundColor: 'rgba(255,255,255,0.1)',
      justifyContent: 'center',
      alignItems: 'center',
    },
    sm: {
      width: 40,
      height: 40,
      borderRadius: 15,
      backgroundColor: 'rgba(255,255,255,0.1)',
      justifyContent: 'center',
      alignItems: 'center',
    },
    md: {
      width: 50,
      height: 50,
      borderRadius: 15,
      backgroundColor: 'rgba(255,255,255,0.1)',
      justifyContent: 'center',
      alignItems: 'center',
    },
    lg: {
      width: 60,
      height: 60,
      borderRadius: 15,
      backgroundColor: 'rgba(255,255,255,0.1)',
      justifyContent: 'center',
      alignItems: 'center',
    },
  });
  const adaptivePlayIconSize = useBreakpointValue<number>({
    base: 40,
    sm: 40,
    md: 50,
    lg: 60,
  });

  useEffect(() => {
    if (isFullScreen) {
      StatusBar.setBarStyle('light-content');
      StatusBar.setTranslucent(true);
      StatusBar.setBackgroundColor('transparent');
      StatusBar.setHidden(true);
      setValue('#000');
    } else {
      StatusBar.setBarStyle('dark-content');
      StatusBar.setTranslucent(false);
      StatusBar.setHidden(false);
      StatusBar.setBackgroundColor('#ffffffff');
      setValue('#fff');
    }
    return () => {
      StatusBar.setBarStyle('dark-content');
      StatusBar.setTranslucent(false);
      StatusBar.setHidden(false);
      StatusBar.setBackgroundColor('#ffffffff');
    };
  }, [isFullScreen]);

  useEffect(() => {
    const keyboardShowListener = Keyboard.addListener('keyboardDidShow', () => {
      setKeyboardVisible(true);
    });

    const keyboardHideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardVisible(false);
    });
    return () => {
      keyboardShowListener.remove();
      keyboardHideListener.remove();
    };
  }, []);

  return (
    <View style={[styles.root, {backgroundColor: value}]}>
      <AvoidContainer>
        <View style={{backgroundColor: '#000', height: '100%', width: '100%'}}>
          <View style={styles.header}>
            <TouchableOpacity style={styles.backBtn} onPress={(): void => navigation.goBack()}>
              <View>
                <Image source={ARROW_WHITE} style={styles.backIcon} resizeMode="cover" />
              </View>
            </TouchableOpacity>
          </View>
          <View style={[styles.content, keyboardVisible ? {transform: [{translateY: -100}]} : {}]}>
            <TouchableOpacity style={adaptivePlayBtn} onPress={(): void => setIsPlaying((v) => !v)}>
              <Text style={{fontSize: adaptivePlayIconSize, color: '#fff'}}>{isPlaying ? '⏸' : '▶'}</Text>
            </TouchableOpacity>
          </View>
          <KeyboardAvoidingView
            style={[styles.text_container]}
            behavior="position"
            keyboardVerticalOffset={PixelRatio.get() + 40}
            enabled={true}>
            <TextInput
              placeholder="输入内容"
              placeholderTextColor="#999"
              style={styles.input}
              onChangeText={(text): void => {}}
              autoFocus={false}
            />
          </KeyboardAvoidingView>
          <View style={styles.footer}>
            <TouchableOpacity style={styles.fullBtn} onPress={(): void => setIsFullScreen((v) => !v)}>
              <Text style={styles.fullText}>{isFullScreen ? '退出全屏' : '全屏切换'}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </AvoidContainer>
    </View>
  );
};

export default Page;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
  bg: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#000',
  },
  header: {
    width: '100%',
    height: 40,
    flexDirection: 'row',
    alignItems: 'center',
  },
  backBtn: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backIcon: {
    width: 24,
    height: 24,
    tintColor: '#fff',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text_container: {
    alignSelf: 'center',
    width: '90%',
  },
  input: {
    backgroundColor: '#fff',
    paddingHorizontal: 12,
    marginHorizontal: 50,
    height: 40,
    fontSize: 20,
    borderRadius: 8,
  },
  footer: {
    width: '100%',
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
  },
  fullBtn: {
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: '#007bff',
    borderRadius: 8,
  },
  fullText: {
    color: '#fff',
    fontSize: 16,
  },
});
